<template>
  <Echart id="leftCenter1" :options="options" class="left_center_inner" ref="daycharts" />
</template>
  
<script>
export default {
  props: ['info'],
  data() {
    return {
      options: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0
      },
      pageflag: true,
      timer: null
    };
  },
  watch: {
    info: {
      handler(newValue, oldValue) {
        this.init()
      },
      deep: true
    },
  },
  // created() {
  //   this.$nextTick(() => {
  //     this.init()
  //   })
  // },
  mounted() {
  },
  beforeDestroy() {

  },
  methods: {

    init() {
      let self = this
      this.options = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '65%'],
            radius: '90%',
            min: self.info.minVal,
            max: self.info.maxVal,
            splitNumber: 5,//分隔份数
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.25, '#FF6E76'],
                  [0.5, '#FDDD60'],
                  [0.75, '#58D9F9'],
                  [1, '#7CFFB2']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '28%',
              width: 10,
              offsetCenter: [0, '-60%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: { //文字样式（及“10”、“20”等文字样式）
              color: "white",
              rotate: 'tangential',
            },

            splitLine: {
              length: 6,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            detail: {
              fontSize: 13,
              // offsetCenter: [0, '-35%'],
              valueAnimation: true,
              formatter: function (value) {
                let unit;
                if (self.info.names == '直流电压') {
                  unit = 'V'
                } else {
                  unit = 'A'
                }
                return self.info.names + ' ' + Math.round(value) + '' + unit;
              },
              color: 'inherit'
            },
            data: [
              {
                value: self.info.val
              }
            ]
          }
        ]
      };
    },
  },
};
</script>
<style lang='scss' scoped></style>